import {
  getCustomComplaintByPage,
  addCustomComplaint,
  addCustomComplaintByQm,
  updateCustomComplaint,
  getUsersByInfoId,
  shutdownCustomComplaint,
  submitCustomComplaint,
  exportCustomComplaint,
  getProjectNameAndCodeSimp,
  getCustomerByPage,
  getCustomComplaintById,
  analyzeCustomComplaintByQm,
  handleCustomComplaint,
  getFilePreviewUrl,
  getComplaintFileInfoByPageAndCP,
  delComplaintFileInfo,
  addComplaintFileInfo,
} from '@/services/quality/customComplaint';
import { PlusOutlined, UploadOutlined, InboxOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  Button,
  Upload,
  Form,
  Input,
  Modal,
  Row,
  Col,
  message,
  Select,
  Tabs,
  InputNumber,
  DatePicker,
  Divider,
  Spin,
} from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useRef, useState, useEffect } from 'react';
import dayjs from 'dayjs';
import weekday from 'dayjs/plugin/weekday';
import localeData from 'dayjs/plugin/localeData';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
import { getDictDataByPage } from '@/services/system/dictData';

dayjs.extend(weekday);
dayjs.extend(localeData);

const CustomComplaint: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const actionRefAttachment = useRef<ActionType>(); //刷新附件的表格
  const { Dragger } = Upload; //附件的拖拽上传
  const [modalVisit, setModalVisit] = useState(false); // 查看和编辑提示框
  const [modalVisit1, setModalVisit1] = useState(false); // 新建提示框
  const [modalVisitAttachment, setModalVisitAttachment] = useState(false); //附件上传的提示框
  const [attachState, setAttachState] = useState<string>(); // 查看投诉中的tab
  const [lookModalVisit, setLookModalVisit] = useState(false); //查看编辑框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [lookConfirmLoading, setLookConfirmLoading] = useState(false);
  const [formTitle, setFormTitle] = useState('新建'); //Modal对应的标题
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [lookOrUpdate, setLookOrUpdate] = useState(true); //编辑框的disable
  const [fileList, setFileList] = useState(); //上传的文件列表
  const [defaultActiveKey, setDefaultActiveKey] = useState('1'); //控制tabs切换,初始值为待上传
  const [shutDownItem, setShutDownItem] = useState('none'); //记录被关闭的投诉
  const [complaintId, setComplaintId] = useState(); //记录要查询的投诉id
  const [form] = Form.useForm();
  const [projectInfos, setProjectInfos] = useState(); //所有项目名称和编号
  const [projectOptions, setProjectOptions] = useState<any[]>(); //项目编号options
  const [problemOptions, setProblemOptions] = useState<any[]>(); //问题描述选型
  const [customersOption, setCustomer] = useState<any[]>();
  const [lookProjectInfo, setLookProjectInfo] = useState<projectAllInfo>();
  const [pageData, setPageData] = useState();
  const [analysis, setAnalysis] = useState<boolean>(true);
  const [pageState, setPageState] = useState<string>('0');
  const [allMemberOptions, setAllMemberOptions] = useState();
  const [loading, setLoading] = useState(false); //投诉详情表格的加载
  const ref = useRef(null);
  const { TextArea } = Input;
  const dateFormat = 'YYYY-MM-DD HH:mm';
  const state = ['创建', '完成'];
  const acceptFileType = [
    '.png, .jpg',
    'application/pdf,text/plain,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel',
  ];

  const columnsUpload: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    {
      title: '文件名称',
      dataIndex: 'fileName',

      align: 'center',
      sorter: true,
    },
    {
      title: '上传日期',
      search: false,
      dataIndex: 'createTime',

      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={async () => {
            window.open(record.fileUrl);
          }}
        >
          预览下载
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                const result = await delComplaintFileInfo({ id: record.id });
                if (result.message === '删除成功') {
                  message.success(result.message);
                } else {
                  message.error('删除失败');
                }
                actionRefAttachment.current?.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  type projectAllInfo = {
    complaintDetailsList: any[];
    customComplaintEx: projectInfo;
  };

  //自定义上传操作
  const onFilesChange = (info: any) => {
    setFileList(info.fileList);
  };
  /* 在文件上传之前进行检验 */
  const handleBeforeUpload = (info: any) => {
    // console.log('在文件上传之前进行检验', info);
    //检验文件大小
    // if (info.size) {
    //   const isLt = info.size / 1024 / 1024 < 1000;
    //   if (!isLt) {
    //     alert(`上传文件大小不能超过 ${1} GB!`);
    //     return false;
    //   } else {
    //     //验证通过
    //   }
    // }
    //检验成功
    return false; //这里必须要返回false，来阻止原生的组件的默认action行为，不然会显示存储错误的信息
  };

  //获取问题描述列表
  const getProblemnOptions = async () => {
    const res = await getDictDataByPage({
      dictTypeId: '8a827f828c6185d8018c62e2315505fd',
      pageEntity: {
        current: 1,
        pageSize: 1000,
        filters: [],
        sorters: [
          {
            desc: false,
            field: 'keyName',
          },
        ],
      },
    });
    interface options {
      value: string;
      label: string;
    }
    const problemOptionsArray = new Array();
    res.data.content.map((item: any) => {
      let temp: options = { value: '', label: '' };
      temp.value = item.keyName;
      temp.label = item.keyName;
      problemOptionsArray.push(temp);
    });
    setProblemOptions(problemOptionsArray);
  };

  const complaintDetailTabList: tabType[] = [
    {
      name: 'tab1',
      label: '投诉详情',
      content: (
        <div>
          <Spin spinning={loading}>
            <Form
              name="wrap"
              labelCol={{ flex: '110px' }}
              labelAlign="right"
              labelWrap
              form={form}
              wrapperCol={{ flex: 1 }}
              colon={false}
            >
              <Form.Item name="id" label="id" hidden={true}>
                <Input />
              </Form.Item>
              <Row gutter={[50, 0]}>
                <Col span={12}>
                  <Form.Item
                    name="projectName"
                    label="项目名称"
                    rules={[{ required: true, message: '请输入项目名称!' }]}
                  >
                    <Select showSearch disabled />
                    {/*这里的项目名称有BUG 先不允许编辑 */}
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="projectCode"
                    label="项目编号"
                    rules={[{ required: true, message: '请输入项目编号!' }]}
                  >
                    <Input disabled />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[50, 0]}>
                <Col span={12}>
                  <Form.Item
                    name="customerName"
                    label="客户名称"
                  >
                    <Input disabled />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="maker"
                    label="联系人"
                    rules={[{ required: true, message: '请输入联系人!' }]}
                  >
                    <Select
                      showSearch
                      filterOption={filterOption}
                      disabled={lookOrUpdate}
                      placeholder="请选择联系人"
                      options={allMemberOptions}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[50, 0]}>
                <Col span={12}>
                  <Form.Item
                    name="complaintTime"
                    label="投诉时间"
                    rules={[{ required: true, message: '请输入投诉时间!' }]}
                  >
                    <DatePicker
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm"
                      disabled={lookOrUpdate}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="responsor"
                    label="负责人"
                    rules={[{ required: true, message: '请输入负责人!' }]}
                  >
                    <Select
                      showSearch
                      filterOption={filterOption}
                      disabled={lookOrUpdate}
                      placeholder="请选择负责人名称"
                      options={allMemberOptions}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[50, 0]}>
                <Col span={12}>
                  <Form.Item name="bugCount" label="缺陷数量(个)">
                    <InputNumber
                      disabled={lookOrUpdate}
                      min={1}
                      max={3}
                      defaultValue={1}
                      onChange={() => {}}
                    />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    name="problemType"
                    label="问题类别"
                    rules={[{ required: true, message: '请输入问题类别！' }]}
                  >
                    <Select
                      disabled={lookOrUpdate}
                      placeholder="请选择问题类别"
                      options={problemOptions}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[50, 0]}>
                <Col span={24}>
                  <Form.Item
                    name="problemTextDes"
                    label="问题描述"
                    rules={[{ required: true, message: '请输入问题描述!' }]}
                  >
                    <TextArea
                      maxLength={100}
                      showCount
                      rows={3}
                      disabled={lookOrUpdate}
                      placeholder="请输入问题描述"
                    />
                  </Form.Item>
                </Col>
              </Row>
              {/*           <Row gutter={[50, 0]}>
                <Col span={24}>
                  <Form.Item
                    name="url"
                    label="图片展示"
                  >
                    <Input disabled={lookOrUpdate} placeholder="请输入url" />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[50, 0]}>
                <Col span={24}>
                  <Form.Item name="problemPicFile" label="问题图片">
                    <Upload 
                    accept=".png,.jpg"
                    listType="picture"
                    file-list="fileList"
                    onChange={onFilesChange}  //通过覆盖默认的上传行为，可以自定义自己的上传实现
                    beforeUpload={handleBeforeUpload}
                    multiple={true} >
                      <Button disabled={lookOrUpdate} icon={<UploadOutlined/>}>
                        上传问题图片
                      </Button>
                    </Upload>
                  </Form.Item>
                </Col>
              </Row> */}
              {/*               {(pageState === '1' || pageState === '2' || pageState === '3' || pageState === '4') && (
                <>
                  <Row gutter={[50, 0]}>
                    <Col span={24}>
                      <Form.Item name="tempSolution" label="临时措施">
                        <TextArea
                          autoSize={{ minRows: 2, maxRows: 5 }}
                          placeholder="请输入描述"
                          maxLength={200}
                          disabled={pageState === '2' || pageState === '3' || pageState === '4'}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </>
              )} */}
              {(pageState === '1' ||
                pageState === '2' ||
                pageState === '3' ||
                pageState === '4') && (
                <>
                  <Row gutter={[50, 0]}>
                    <Col span={24}>
                      <Form.Item name="reasonAnalysis" label="原因分析及描述">
                        <TextArea
                          autoSize={{ minRows: 2, maxRows: 5 }}
                          placeholder="请输入描述"
                          maxLength={200}
                          disabled={pageState === '2' || pageState === '3' || pageState === '4'}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={[50, 0]}>
                    <Col span={24}>
                      <Form.Item name="improvementText" label=" 改进措施附件">
                        <Upload
                          file-list="fileList"
                          onChange={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                          beforeUpload={handleBeforeUpload}
                          multiple={true}
                        >
                          <Button
                            disabled={pageState === '2' || pageState === '3' || pageState === '4'}
                            icon={<UploadOutlined />}
                          >
                            可上传附件
                          </Button>
                        </Upload>
                      </Form.Item>
                    </Col>
                  </Row>
                </>
              )}
              {(pageState === '2' || pageState === '3' || pageState === '4') && (
                <>
                  <Row gutter={[50, 0]}>
                    <Col span={24}>
                      <Form.Item name="baseReasonAnalysis" label="根本原因分析">
                        <TextArea
                          autoSize={{ minRows: 2, maxRows: 5 }}
                          placeholder="请输入根本原因分析"
                          maxLength={200}
                          disabled={pageState === '3' || pageState === '4'}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                  <Row gutter={[50, 0]}>
                    <Col span={24}>
                      <Form.Item name="improvementText" label="后续改进措施">
                        <TextArea
                          autoSize={{ minRows: 2, maxRows: 5 }}
                          placeholder="请输入后续改进措施"
                          maxLength={200}
                          disabled={pageState === '3' || pageState === '4'}
                        />
                      </Form.Item>
                    </Col>
                  </Row>
                </>
              )}
            </Form>
          </Spin>
          <Divider></Divider>
          <div style={{ justifyContent: 'right', gap: '20px', display: 'flex' }}>
            <Button
              onClick={() => {
                setModalVisit(false);
              }}
            >
              确定
            </Button>
            <Button
              onClick={() => {
                handleSubmit();
              }}
              type="primary"
            >
              {pageState === '0' ? '保存' : '提交'} {/* 待上传tab现实保存，其他情况显示提交 */}
            </Button>
          </div>
        </div>
      ),
    },
    {
      name: 'tab2',
      label: '投诉附件',
      content: (
        <ProTable
          headerTitle="投诉附件查询"
          actionRef={actionRefAttachment} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          search={false}
          toolBarRender={(action, { selectedRows }) => [
            <Button
              key="button"
              icon={<UploadOutlined />}
              type="primary"
              /*             disabled={ pageState != '0'} */
              onClick={() => {
                setModalVisitAttachment(true);
              }}
            >
              上传附件
            </Button>,
          ]}
          request={async (params, sort, filter) => {
            const sorters = sortTran(sort);
            const filters = filterTranNew(params);
            const pageEntity = {
              sorters: sorters,
              filters: filters,
              current: params.current,
              pageSize: params.pageSize,
            };
            const result = await getComplaintFileInfoByPageAndCP({
              pageEntity: pageEntity,
              complaintId: complaintId,
            });
            /*             console.log(result,'附件') */
            const complaintAttachments = new Array();
            result.data.content?.map((item: any) => {
              if (item.state === 0) {
                complaintAttachments.push(item); //筛选state为0 即投诉图片的文件
              }
            });
            console.log(complaintAttachments);
            return {
              data: complaintAttachments,
              total: complaintAttachments.length,
              success: result.message,
            };
          }}
          columns={columnsUpload}
          scroll={{ x: 800, y: 350 }}
          rowSelection={{}}
        />
      ),
    },
    {
      name: 'tab3',
      label: '措施附件',
      content: (
        <ProTable
          headerTitle="改进措施附件查询"
          actionRef={actionRefAttachment} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          formRef={ref}
          search={false}
          toolBarRender={(action, { selectedRows }) => [
            <Button
              key="button"
              icon={<UploadOutlined />}
              type="primary"
              /*               disabled={ pageState != '0'} */
              onClick={() => {
                setModalVisitAttachment(true);
              }}
            >
              上传附件
            </Button>,
          ]}
          request={async (params, sort, filter) => {
            const sorters = sortTran(sort);
            const filters = filterTranNew(params);
            const pageEntity = {
              sorters: sorters,
              filters: filters,
              current: params.current,
              pageSize: params.pageSize,
            };
            const result = await getComplaintFileInfoByPageAndCP({
              pageEntity: pageEntity,
              complaintId: complaintId,
            });
            /*             console.log(result,'附件') */
            const complaintAttachments = new Array();
            result.data.content?.map((item: any) => {
              if (item.state === 1) {
                complaintAttachments.push(item); //筛选state为1 即后续措施的文件
              }
            });
            console.log(complaintAttachments);
            return {
              data: complaintAttachments,
              total: complaintAttachments.length,
              success: result.message,
            };
          }}
          columns={columnsUpload}
          scroll={{ x: 800, y: 350 }}
          rowSelection={{}}
        />
      ),
    },
  ];

  const getData = async () => {
    const temp = {
      current: 1,
      filters: [],
      pageSize: 20,
      sorters: [],
    };
    const customers = await getCustomerByPage(temp);
    const customersOptions: any[] = [];
    customers.data.content.map((item: any) => {
      customersOptions.push({ label: item.customerName, value: item.customerName });
    });
    setCustomer(customersOptions);
  };

  useEffect(() => {
    getData();
  }, []);

  type projectInfo = {
    bugCount: number;
    complaintTime: string;
    contacts: string;
    customerName: string;
    handleTime: string;
    handler: string | null;
    id: string;
    projectCode: string;
    projectName: string;
    state: number;
  };

  const states = ['待上传', '临时措施', '待分析', '待确认', '已处理'];

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      align: 'center',
      sorter: true,
      width: 80,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',
      align: 'center',
      sorter: true,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      align: 'center',
      sorter: true,
    },
    {
      title: '问题类别',
      dataIndex: 'problemType',
      align: 'center',
      sorter: true,
    },
    {
      title: '缺陷数量(个)',
      dataIndex: 'bugCount',
      align: 'center',
      sorter: true,

      search: false,
    },
    /*{
      title: '问题文字描述',
      dataIndex: 'problemTextDes',
     align: 'center',sorter: true, 
      search: false,
    },
    {
      title: '问题图片',
      dataIndex: 'problemPicUrl',
     align: 'center',sorter: true, 
      search: false,
    },
    {
      title: '原因分析及描述',
      dataIndex: 'reasonAnalysis',
     align: 'center',sorter: true, 
      search: false,
    },
    {
      title: '后续改进措施',
      dataIndex: 'improvementText',
     align: 'center',sorter: true, 
      search: false,
    },
    {
      title: '根本原因分析',
      dataIndex: 'baseReasonAnalysis',
     align: 'center',sorter: true, 
      search: false,
    },*/
    {
      title: '完成日期',
      dataIndex: 'finishTime',
      valueType: 'date',
      align: 'center',
      sorter: true,
      search: false,
    },
    {
      title: '完成日期',
      dataIndex: 'finishTime',
      valueType: 'dateRange',
      align: 'center',
      sorter: true,
      search: pageState === '4' ? true : false, //只有已处理中有完成日期

      hideInTable: true,
    },
    {
      title: '责任人',
      dataIndex: 'responsor',
      align: 'center',
      sorter: true,
    },
    {
      title: '联系人',
      dataIndex: 'maker',
      align: 'center',
      sorter: true,
    },
    {
      title: '投诉时间',
      dataIndex: 'makerTime',
      align: 'center',
      sorter: true,

      search: false,
    },
    {
      title: '投诉时间',
      dataIndex: 'makerTime',
      valueType: 'dateRange',
      align: 'center',
      sorter: true,

      hideInTable: true,
    },
    {
      title: '状态',
      dataIndex: 'state',
      align: 'center',
      sorter: true,
      valueType: 'select',
      search: false, //既然都分tab1了，tab就不需要作为搜索的一项了吧
      render: (text, record, _, action) => {
        return (
          <div>
            {record.state == 0
              ? '待上传'
              : record.state == 1
              ? '临时措施'
              : record.state == 2
              ? '待分析'
              : record.state == 3
              ? '待确认'
              : '已处理'}
          </div>
        );
      },
      request: async () => [
        { value: '0', label: '待上传' },
        { value: '1', label: '临时措施' },
        { value: '2', label: '待分析' },
        { value: '3', label: '待确认' },
        { value: '4', label: '已确认' },
      ],
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      width: 230,
      render: (text, record, _, action) => {
        if (pageState === '0') {
          return [
            /*             <a
              key="lookKey"
              onClick={async () => {
                setModalVisit(true);
                setLookOrUpdate(true);
                setCreateOrUpdate(true);
                setFormTitle('查看');
                const fileGet = {
                  customComplaintId: record.id,
                  state: 0,
                };
                const url = await getFilePreviewUrl(fileGet);
                console.log(url);
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.complaintTime),
                  responsor: record.responsor,
                  maker: record.maker,
                  customerName: record.customerName,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                });
              }}
            >
              查看
            </a>, */
            <a
              key="editKey"
              onClick={async () => {
                setLoading(true); //这里接口拿数据实在是太慢了，所以加一个加载
                setModalVisit(true);
                setLookOrUpdate(false);
                setCreateOrUpdate(true);
                setFormTitle('编辑');
                /*                 const fileGet = {
                  customComplaintId: record.id,
                  state: 0,
                };
                const url = await getFilePreviewUrl(fileGet);
                console.log(url); */
                setComplaintId(record.id); //点开时记录下投诉id
                const optionsTemp: any = []; //之前创建的投诉，部分没有infoId
                if (record.infoId != null) {
                  const allMember = await getUsersByInfoId(record.infoId);
                  allMember.data.map((item: any) => {
                    optionsTemp.push({ label: item.userName, value: item.userId });
                  });
                  console.log(allMember, 'allMenmer');
                } else {
                  message.error('该项目InfoId不存在，无法查询到团队成员');
                }
                setAllMemberOptions(optionsTemp);
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.makerTime),
                  maker: record.maker,
                  responsor: record.responsor,
                  customerName: record.customerName,
                  problemTextDes: record.problemTextDes,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                  problemType: record.problemType,
                });
                setLoading(false);
              }}
            >
              投诉详情
            </a>,
            <a
              key="uploadKey"
              onClick={() => {
                Modal.confirm({
                  title: '上传',
                  content: '确定要上传吗',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    const result = await submitCustomComplaint(record.id);
                    if (result && result.code === 0) {
                      message.success('上传成功！');
                    }
                    actionRef.current!.reload();
                    setPageState('0');
                  },
                });
              }}
            >
              上传
            </a>,
            <a
              key="finishKey"
              onClick={() => {
                Modal.confirm({
                  title: '关闭',
                  content: '确认关闭该条投诉信息嘛',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    let res = {};
                    res.complaintId = record.id; //投诉id
                    res.finishTime = dayjs(new Date()).format(dateFormat); //完成时间为当前操作时间
                    console.log(res);
                    const result = await shutdownCustomComplaint(res);
                    if (result && result.code === 0) {
                      message.success('关闭成功！');
                    }
                    actionRef.current!.reload();
                  },
                });
              }}
            >
              关闭
            </a>,
          ];
        } else if (pageState === '1') {
          return [
            <a
              key="handleKey"
              onClick={async () => {
                setModalVisit(true);
                setLookOrUpdate(true);
                setCreateOrUpdate(true);
                setFormTitle('临时措施');
                console.log(record.id);
                setComplaintId(record.id); //点开时记录下投诉id
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.makerTime),
                  maker: record.maker,
                  responsor: record.responsor,
                  customerName: record.customerName,
                  problemTextDes: record.problemTextDes,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                  reasonAnalysis: record.reasonAnalysis,
                  problemType: record.problemType,
                });
              }}
            >
              处理
            </a>,
          ];
        } else if (pageState === '2') {
          return [
            <a
              key="analysisKey"
              onClick={async () => {
                setModalVisit(true);
                setLookOrUpdate(true);
                setCreateOrUpdate(true);
                setFormTitle('待分析');
                console.log(record.id);
                setComplaintId(record.id); //点开时记录下投诉id
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.makerTime),
                  maker: record.maker,
                  responsor: record.responsor,
                  customerName: record.customerName,
                  problemTextDes: record.problemTextDes,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                  reasonAnalysis: record.reasonAnalysis,
                  baseReasonAnalysis: record.baseReasonAnalysis,
                  improvementText: record.improvementText,
                  problemType: record.problemType,
                });
              }}
            >
              问题分析
            </a>,
            <a
              key="finishKey"
              onClick={() => {
                Modal.confirm({
                  title: '关闭',
                  content: '确认关闭该条投诉信息嘛',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    let res = {};
                    res.complaintId = record.id; //投诉id
                    res.finishTime = dayjs(new Date()).format(dateFormat); //完成时间为当前操作时间
                    console.log(res);
                    const result = await shutdownCustomComplaint(res);
                    if (result && result.code === 0) {
                      message.success('关闭成功！');
                    }
                    actionRef.current!.reload();
                    setDefaultActiveKey('5'); //关闭后自动切换到已处理
                    setShutDownItem(record.projectCode); //记录下被关闭的投诉的项目编号
                  },
                });
              }}
            >
              关闭
            </a>,
          ];
        } else if (pageState === '3') {
          return [
            <a
              key="lookKey"
              onClick={async () => {
                setModalVisit(true);
                setLookOrUpdate(true);
                setCreateOrUpdate(true);
                setFormTitle('待确认');
                setComplaintId(record.id); //点开时记录下投诉id
                const fileGet = {
                  customComplaintId: record.id,
                  state: 0,
                };
                const url = await getFilePreviewUrl(fileGet);
                console.log(url);
                console.log(record);
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.makerTime),
                  responsor: record.responsor,
                  maker: record.maker,
                  customerName: record.customerName,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                  baseReasonAnalysis: record.baseReasonAnalysis,
                  improvementText: record.improvementText,
                  reasonAnalysis: record.reasonAnalysis,
                  problemTextDes: record.problemTextDes,
                  problemType: record.problemType,
                });
              }}
            >
              查看
            </a>,
            <a
              key="yesKey"
              onClick={() => {
                Modal.confirm({
                  title: '关闭',
                  content: '确认关闭该条投诉信息嘛',
                  okText: '确认',
                  cancelText: '取消',
                  onOk: async () => {
                    let res = {};
                    res.complaintId = record.id; //投诉id
                    res.finishTime = dayjs(new Date()).format(dateFormat); //完成时间为当前操作时间
                    console.log(res);
                    const result = await shutdownCustomComplaint(res);
                    if (result && result.code === 0) {
                      message.success('关闭成功！');
                    }
                    actionRef.current!.reload();
                  },
                });
              }}
            >
              确认
            </a>,
          ];
        } else if (pageState === '4') {
          return [
            <a
              key="wantLookKey"
              onClick={() => {
                setModalVisit(true);
                setLookOrUpdate(true);
                setCreateOrUpdate(true);
                setFormTitle('已处理');
                setComplaintId(record.id); //点开时记录下投诉id
                form.setFieldsValue({
                  bugCount: record.bugCount,
                  complaintTime: dayjs(record.makerTime),
                  maker: record.maker,
                  responsor: record.responsor,
                  customerName: record.customerName,
                  problemTextDes: record.problemTextDes,
                  handleTime: dayjs(record.handleTime),
                  handler: record.handler,
                  infoId: record.infoId,
                  memo: record.memo,
                  projectCode: record.projectCode,
                  projectName: record.projectName,
                  state: record.state,
                  telephone: record.telephone,
                  id: record.id,
                  reasonAnalysis: record.reasonAnalysis,
                  baseReasonAnalysis: record.baseReasonAnalysis,
                  improvementText: record.improvementText,
                  problemType: record.problemType,
                });
              }}
            >
              查看
            </a>,
          ];
        }
      },
    },
  ];

  type tabsType = {
    key: string;
    name: string;
    label: string;
    content: JSX.Element;
  };
  const items1: tabsType[] = [
    {
      key: '0',
      name: 'tab1',
      label: `待上传`,

      content: (
        <ProTable
          headerTitle="客户投诉查询"
          actionRef={actionRef} //用于触发刷新操作等，看api
          rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
          search={{
            ...tableSearchPublicConfig,
          }}
          toolBarRender={(action, { selectedRows }) => [
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={async () => {
                setLookOrUpdate(false);
                const result = await getProjectNameAndCodeSimp();
                setProjectInfos(result.data);
                const temp: any[] = [];
                result.data.map((item: any) => {
                  temp.push({ label: item.projectName, value: item.projectName });
                });
                getProblemnOptions();
                setProjectOptions(temp);
                setCreateOrUpdate(false);
                setFormTitle('新建');
                form.resetFields();
                setModalVisit1(true);
              }}
              type="primary"
            >
              新建
            </Button>,
            <Button
              key="button"
              icon={<PlusOutlined />}
              onClick={() => {
                const filters = [
                  {
                    andOr: 'and',
                    field: 'state',
                    operator: 'eq',
                    value: '0',
                  },
                ];
                exportCustomComplaint({
                  current: 1,
                  pageSize: 5000,
                  filters: filters,
                }).then((res) => {
                  const aLink = document.createElement('a');
                  document.body.appendChild(aLink);
                  aLink.style.display = 'none';
                  aLink.href = window.URL.createObjectURL(res);
                  aLink.setAttribute('download', `CustomComplaint.xls`);
                  aLink.click();
                  document.body.removeChild(aLink);
                });
              }}
              type="primary"
            >
              导出
            </Button>,
          ]}
          request={async (params = {}, sort, filter) => {
            const sorters = sortTran(sort);
            const filters = filterTranNew(params);
            const filters1 = {
              andOr: 'and',
              field: 'state',
              operator: 'eq',
              value: '0',
            };
            filters.push(filters1);
            console.log(filters);
            setPageState('0');
            console.log(params);
            const result0 = await getCustomComplaintByPage({
              ...params,
              sorters: sorters,
              filters: filters,
            });
            console.log(result0.data.content, 'conteny');
            return {
              data: result0.data.content,
              total: result0.data.totalElements,
              success: result0.success,
            };
          }}
          columns={columns.filter(function (item) {
            return item.dataIndex != 'finishTime';
          })}
          scroll={{ x: 2000, y: 350 }}
          rowSelection={{}}
        />
      ),
    },
    {
      key: '1',
      name: 'tab2',
      label: `临时措施`,
      content: (
        <div>
          <ProTable
            headerTitle="客户投诉查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={{
              ...tableSearchPublicConfig,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = [
                    {
                      andOr: 'and',
                      field: 'state',
                      operator: 'eq',
                      value: '1',
                    },
                  ];
                  exportCustomComplaint({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `CustomComplaint.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTranNew(params);
              const filters1 = {
                andOr: 'and',
                field: 'state',
                operator: 'eq',
                value: '1',
              };
              filters.push(filters1);
              console.log(filters);
              setPageState('1');
              const result2 = await getCustomComplaintByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              return {
                data: result2.data.content,
                total: result2.data.totalElements,
                success: result2.success,
              };
            }}
            columns={columns.filter(function (item) {
              return item.dataIndex != 'finishTime';
            })}
            scroll={{ x: 2000, y: 350 }}
            rowSelection={{}}
          />
        </div>
      ),
    },
    {
      key: '2',
      name: 'tab3',
      label: `待分析`,
      content: (
        <div>
          <ProTable
            headerTitle="客户投诉查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={{
              ...tableSearchPublicConfig,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = [
                    {
                      andOr: 'and',
                      field: 'state',
                      operator: 'eq',
                      value: '2',
                    },
                  ];
                  exportCustomComplaint({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `CustomComplaint.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTranNew(params);
              const filters1 = {
                andOr: 'and',
                field: 'state',
                operator: 'eq',
                value: '2',
              };
              filters.push(filters1);
              console.log(filters);
              setPageState('2');
              const result1 = await getCustomComplaintByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              return {
                data: result1.data.content,
                total: result1.data.totalElements,
                success: result1.success,
              };
            }}
            columns={columns.filter(function (item) {
              return item.dataIndex != 'finishTime';
            })}
            scroll={{ x: 2000, y: 350 }}
            rowSelection={{}}
          />
        </div>
      ),
    },

    {
      key: '3',
      name: 'tab4',
      label: `待确认`,
      content: (
        <div>
          <ProTable
            headerTitle="客户投诉查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={{
              ...tableSearchPublicConfig,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = [
                    {
                      andOr: 'and',
                      field: 'state',
                      operator: 'eq',
                      value: '3',
                    },
                  ];
                  exportCustomComplaint({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `CustomComplaint.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTranNew(params);
              const filters1 = {
                andOr: 'and',
                field: 'state',
                operator: 'eq',
                value: '3',
              };
              filters.push(filters1);
              console.log(filters);
              setPageState('3');
              const result3 = await getCustomComplaintByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              return {
                data: result3.data.content,
                total: result3.data.totalElements,
                success: result3.success,
              };
            }}
            columns={columns.filter(function (item) {
              return item.dataIndex != 'finishTime';
            })}
            scroll={{ x: 2000, y: 350 }}
            rowSelection={{}}
          />
        </div>
      ),
    },
    {
      key: '4',
      name: 'tab5',
      label: `已处理`,
      content: (
        <div>
          <ProTable
            headerTitle="客户投诉查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={{
              ...tableSearchPublicConfig,
            }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filters = [
                    {
                      andOr: 'and',
                      field: 'state',
                      operator: 'eq',
                      value: '4',
                    },
                  ];
                  exportCustomComplaint({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `CustomComplaint.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>,
            ]}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTranNew(params);
              const filters1 = {
                andOr: 'and',
                field: 'state',
                operator: 'eq',
                value: '4',
              };
              filters.push(filters1);
              if (shutDownItem != 'none') {
                const filters2 = {
                  andOr: 'and',
                  field: 'projectCode',
                  operator: 'eq',
                  value: shutDownItem,
                };
                filters.push(filters2);
                setShutDownItem('none');
              }
              console.log(filters);
              setPageState('4');
              const result4 = await getCustomComplaintByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              console.log(result4, '已处理');
              return {
                data: result4.data.content,
                total: result4.data.totalElements,
                success: result4.success,
              };
            }}
            columns={columns}
            scroll={{ x: 2000, y: 350 }}
            rowSelection={{}}
          />
        </div>
      ),
    },
  ];

  const handleSubmit = async () => {
    if (formTitle === '查看') {
      setConfirmLoading(false);
      setModalVisit(false);
    } else {
      setConfirmLoading(true);
      if (formTitle == '新建') {
        form
          .validateFields()
          .then(async () => {
            let res = { ...form.getFieldsValue() };
            const formData = new window.FormData();
            console.log('文件列表', fileList);
            fileList?.map((item: any) => {
              formData.append('problemPicFile', item.originFileObj); //需要将file类型的文件转入formData中，不然后端接收不到
            });
            res.problemPicFile = formData;
            setFileList(undefined);
            res.makerTime = dayjs(res.complaintTime).format(dateFormat); //makerTime字段对应了complaintTime
            if (res.handleTime != null) {
              res.handleTime = dayjs(res.handleTime).format(dateFormat);
            }
            if (res.bugCount === undefined) res.bugCount = 1;
            const infoId = projectInfos?.find(
              (item) => item.projectCode === res.projectCode,
            ).infoId;
            res = { ...res, infoId: infoId };
            console.log(res);
            const result = await addCustomComplaintByQm(res);
            if (result && result.code === 0) {
              message.success(result.message);
            }
            setConfirmLoading(false);
            setModalVisit1(false);
            actionRef.current?.reload();
            setPageState('0');
          })
          .catch((err) => {
            setConfirmLoading(false);
          });
        actionRef.current?.reload();
        setPageState('0');
      } else {
        form
          .validateFields()
          .then(async () => {
            if (pageState === '0') {
              //待上传 更新
              const res = { ...form.getFieldsValue() };
              res.makerTime = dayjs(res.complaintTime).format(dateFormat);
              if (res.handleTime != null) {
                res.handleTime = dayjs(res.handleTime).format(dateFormat);
              }
              if (res.bugCount === undefined) res.bugCount = 1;
              console.log(res);
              const result = await updateCustomComplaint(res);
              if (result != null) {
                message.success('更新成功');
              }
              setPageState('0');
            } else if (pageState === '1') {
              //临时措施 处理
              const res = { ...form.getFieldsValue() };
              const formData = new window.FormData();
              console.log('文件列表', fileList);
              fileList?.map((item: any) => {
                formData.append('improvementFile', item.originFileObj); //需要将file类型的文件转入formData中，不然后端接收不到
              });
              res.improvementFile = formData;
              setFileList(undefined);
              const result = await handleCustomComplaint(res);
              if (result && result.code === 0) {
                message.success(result.message);
              }
              setPageState('1');
            } else if (pageState === '2') {
              //待分析 分析
              const res = { ...form.getFieldsValue() };
              const result = await analyzeCustomComplaintByQm({
                baseReasonAnalysis: res.baseReasonAnalysis,
                improvementText: res.improvementText,
                complaintId: res.id,
              });
              if (result && result.code === 0) {
                message.success(result.message);
              }
              setPageState('2');
            }
            setConfirmLoading(false);
            setModalVisit(false);
            actionRef.current!.reload();
          })
          .catch((err) => {
            setConfirmLoading(false);
          });
      }
    }
  };

  const changeProjectCode = (e: string) => {
    const projectCode = projectInfos!.find((item: any) => {
      return item.projectName === e;
    }).projectCode;
    form.setFieldsValue({
      projectCode: projectCode,
    });
  };

  const changeCustomerName = (e: string) => {
    const customerName = projectInfos!.find((item: any) => {
      return item.projectName === e;
    }).customerName;
    form.setFieldsValue({
      customerName: customerName,
    });
  };

  const uploadAttachMent = async (values: any) => {
    setConfirmLoading(true);
    form
      .validateFields()
      .then(async () => {
        let res = { ...form.getFieldsValue() };
        res.complaintId = complaintId;
        if (fileList === undefined) {
          //文件列表没有文件
          message.warning('您还未选择文件');
          setConfirmLoading(false);
        } else {
          const formData = new window.FormData();
          console.log('文件列表', fileList);
          fileList?.map((item: any) => {
            formData.append('problemPicFile', item.originFileObj); //需要将file类型的文件转入formData中，不然后端接收不到
          });
          res.problemPicFile = formData;
          res.state = Number(attachState) - 2;
          //attachState为2时，应该对应的是投诉图片描述，则state为0 attachState为3时,应该对应的是后续附件，则state为1
          console.log(res);
          const result = await addComplaintFileInfo(res);
          if (result.message === '增加成功') {
            message.success(result.message);
          } else {
            message.error('上传失败');
          }
          setConfirmLoading(false);
          setModalVisitAttachment(false);
          actionRefAttachment.current?.reload();
        }
      })
      .catch((err) => {
        setConfirmLoading(false);
      });
  };

  //下拉框搜索匹配
  const filterOption = (input: string, option: { label: string; value: string }) =>
    (option?.label ?? '').toLowerCase().includes(input.toLowerCase());

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <Modal
        title="新建"
        open={modalVisit1}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setModalVisit1(false);
          setFileList(undefined); //必须把文件列表清空
        }}
        width={1000}
        destroyOnClose
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="right"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item name="id" label="id" hidden={true}>
            <Input />
          </Form.Item>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="projectName"
                label="项目名称"
                rules={[{ required: true, message: '请输入项目名称!' }]}
              >
                <Select
                  showSearch
                  filterOption={filterOption}
                  disabled={lookOrUpdate}
                  placeholder="请选择项目名称"
                  options={projectOptions}
                  onChange={async (e) => {
                    changeCustomerName(e);
                    changeProjectCode(e);
                    form.setFieldsValue({
                      maker: '',
                      responsor: '',
                    });
                    const target = projectInfos?.find((item: any) => item.projectName === e).infoId;
                    const allMember = await getUsersByInfoId(target);
                    const optionsTemp: any = [];
                    allMember.data.map((item: any) => {
                      optionsTemp.push({ label: item.userName, value: item.userId });
                    });
                    console.log(allMember, 'allMenmer');
                    setAllMemberOptions(optionsTemp);
                  }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="projectCode"
                label="项目编号"
                rules={[{ required: true, message: '请输入项目编号!' }]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item name="customerName" label="客户名称">
                <Input />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="maker"
                label="联系人"
                rules={[{ required: true, message: '请输入联系人!' }]}
              >
                <Select
                  showSearch
                  filterOption={filterOption}
                  disabled={lookOrUpdate}
                  placeholder="请选择联系人"
                  options={allMemberOptions}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="complaintTime"
                label="投诉时间"
                rules={[{ required: true, message: '请输入投诉时间!' }]}
              >
                <DatePicker
                  showTime={{ format: 'HH:mm' }}
                  format="YYYY-MM-DD HH:mm"
                  disabled={lookOrUpdate}
                  style={{ width: 340 }}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="responsor"
                label="负责人"
                rules={[{ required: true, message: '请输入负责人!' }]}
              >
                <Select
                  showSearch
                  filterOption={filterOption}
                  disabled={lookOrUpdate}
                  placeholder="请选择负责人名称"
                  options={allMemberOptions}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item name="bugCount" label="缺陷数量(个)">
                <InputNumber
                  disabled={lookOrUpdate}
                  min={1}
                  max={3}
                  defaultValue={1}
                  onChange={() => {}}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="problemType"
                label="问题类别"
                rules={[{ required: true, message: '请输入问题类别！' }]}
              >
                <Select
                  disabled={lookOrUpdate}
                  placeholder="请选择问题类别"
                  options={problemOptions}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item
                name="problemTextDes"
                label="问题描述"
                rules={[{ required: true, message: '请输入问题描述!' }]}
              >
                <TextArea
                  maxLength={100}
                  showCount
                  rows={3}
                  disabled={lookOrUpdate}
                  placeholder="请输入问题描述"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item name="problemPicFile" label="问题图片">
                <Upload
                  accept=".png,.jpg"
                  listType="picture"
                  file-list="fileList"
                  onChange={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
                  beforeUpload={handleBeforeUpload}
                  multiple={true}
                >
                  <Button disabled={lookOrUpdate} icon={<UploadOutlined />}>
                    上传问题图片
                  </Button>
                </Upload>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>

      <Modal
        // title={formTitle}
        open={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setModalVisit(false);
        }}
        width={1500}
        footer={null} //取消页脚
        destroyOnClose
      >
        <Tabs
          destroyInactiveTabPane
          defaultActiveKey={'1'}
          style={{ backgroundColor: 'white' }}
          type="card"
          items={complaintDetailTabList.map((item, i) => {
            const id = String(i + 1);
            if (pageState === '0' || pageState === '1') {
              //待上传和待处理部分，不显示改进措施的附件tabs
              if (item.name != 'tab3') {
                return {
                  label: item.label,
                  key: id,
                  children: <div>{item.content}</div>,
                };
              }
            } else {
              return {
                label: item.label,
                key: id,
                children: <div>{item.content}</div>,
              };
            }
          })}
          onChange={(value) => {
            console.log('tab序列信息：', value);
            setAttachState(value);
          }}
        />
      </Modal>
      <Modal
        title="客户投诉与缺陷反馈-查看"
        open={lookModalVisit}
        onOk={() => {
          setLookModalVisit(false);
        }}
        confirmLoading={lookConfirmLoading}
        onCancel={() => {
          setLookModalVisit(false);
        }}
        width={1000}
        destroyOnClose
      >
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <Col span={12}>
            <div>
              项目名称：{lookProjectInfo ? lookProjectInfo.customComplaintEx.projectName : ''}
            </div>
          </Col>
          <Col span={12}>
            <div>
              项目编号：{lookProjectInfo ? lookProjectInfo.customComplaintEx.projectCode : ''}
            </div>
          </Col>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <Col span={12}>
            <div>
              客户名称：{lookProjectInfo ? lookProjectInfo.customComplaintEx.customerName : ''}
            </div>
          </Col>
          <Col span={12}>
            <div>联系人：{lookProjectInfo ? lookProjectInfo.customComplaintEx.responsor : ''}</div>
          </Col>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <Col span={12}>
            <div>
              投诉时间：{lookProjectInfo ? lookProjectInfo.customComplaintEx.complaintTime : ''}
            </div>
          </Col>
          <Col span={12}>
            <div>缺陷数量：{lookProjectInfo ? lookProjectInfo.customComplaintEx.bugCount : ''}</div>
          </Col>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <Col span={12}>
            <div>处理人：{lookProjectInfo ? lookProjectInfo.customComplaintEx.handler : ''}</div>
          </Col>
          <Col span={12}>
            <div>
              处理时间：{lookProjectInfo ? lookProjectInfo.customComplaintEx.handleTime : ''}
            </div>
          </Col>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            缺陷问题一：{lookProjectInfo ? lookProjectInfo.complaintDetailsList[0].question : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            结果反馈一:{lookProjectInfo ? lookProjectInfo.complaintDetailsList[0].feedback : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            缺陷问题二：{lookProjectInfo ? lookProjectInfo.complaintDetailsList[1].question : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            结果反馈二:{lookProjectInfo ? lookProjectInfo.complaintDetailsList[1].feedback : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            缺陷问题三：{lookProjectInfo ? lookProjectInfo.complaintDetailsList[2].question : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <div>
            结果反馈三:{lookProjectInfo ? lookProjectInfo.complaintDetailsList[2].feedback : ''}
          </div>
        </Row>
        <Row style={{ padding: '10px', fontSize: '16px' }}>
          <Col span={12}>
            <div>
              状 态：{lookProjectInfo ? state[lookProjectInfo.customComplaintEx.state] : ''}
            </div>
          </Col>
        </Row>
      </Modal>
      <Tabs
        destroyInactiveTabPane //每次切换tabs的时候销毁DOM,以此达到刷新的效果，但是这种方式比较消耗性能
        type="card"
        activeKey={defaultActiveKey}
        onTabClick={(params) => {
          setDefaultActiveKey(params);
        }}
        onChange={(e) => {
          setPageState(String(Number(e) - 1));
        }}
        items={items1.map((item, i) => {
          const id = String(i + 1);
          return {
            label: item.label,
            key: id,
            children: <div>{item.content}</div>,
          };
        })}
      />
      <Modal
        title="附件上传"
        open={modalVisitAttachment}
        confirmLoading={confirmLoading}
        onOk={uploadAttachMent}
        onCancel={() => {
          setModalVisitAttachment(false);
          setFileList(undefined); //清空文件列表
        }}
        width={800}
        destroyOnClose
      >
        <Dragger
          accept={attachState === '2' ? acceptFileType[0] : acceptFileType[1]}
          listType="picture"
          file-list="fileList"
          onChange={onFilesChange} //通过覆盖默认的上传行为，可以自定义自己的上传实现
          beforeUpload={handleBeforeUpload}
          multiple={true}
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击上传</p>
          <p className="ant-upload-hint">支持多文件上传</p>
        </Dragger>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default CustomComplaint;
